<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="description" content="">
    <meta http-equiv="x-dns-prefetch-control" content="on">

    <title>订单分配成功</title>
    <link href="../../css/css.css" rel="stylesheet" type="text/css">
    <script src="../../js/jquery-v1.11.2.min.js"></script>
    <script src="../../js/driver.js"></script>
    <script src="../../js/common.js"></script>

    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script src="http://webapi.amap.com/maps?v=1.3&key=4082cc7cea44a1f8c926676ce9508fac"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<section class="tabbtnarea" style="z-index: 999">
    <li class="w33 rline" id="goOrder1">订单信息</li>
    <li class="w33 rline"><span class="tabfouse">订单轨迹</span></li>
    <li class="w33" id="goOrder3">费用明细</li>
</section>
<section class="mt44">
    <div id="container"></div>
    <div class="button-group">
        <input type="button" class="button" value="开始动画" id="start"/>
        <input type="button" class="button" value="停止动画" id="stop"/>
    </div>
</section>
<script type="text/javascript">
    $(function () {
        //token验证
        checkDriverToken();
    });
    $(document).ready(function () {
        var waybillId = GetArgsFromHref("waybillId");
        var url = _global.serverHost + "/driver/bid_ok_detail2.htm";
        var data = {waybillId: waybillId};
        _callAjaxRequest(url, data, ajaxBack);

        function ajaxBack(data) {
            $("#goOrder1").attr("onclick", "goOrder1('" + data.waybill.id + "')");
            $("#goOrder3").attr("onclick", "goOrder3('" + data.waybill.id + "')");

            var lon = data.waybill.startLon;
            var lat = data.waybill.startLat;
            if (data.waybillTraceList != null && data.waybillTraceList.length > 0 && data.waybillTraceList[0] != null) {
                lon = data.waybillTraceList[0].lon;
                lat = data.waybillTraceList[0].lat;
            }
            var marker, lineArr = [];
            var map = new AMap.Map("container", {
                resizeEnable: true,
                center: [lon, lat],
                zoom: 17
            });
            map.on("complete", completeEventHandler);

            AMap.event.addDomListener(
                document.getElementById('start'), 'click', function () {
                    marker.moveAlong(lineArr, 10000);
                }, false
            );
            AMap.event.addDomListener(document.getElementById('stop'), 'click', function () {
                marker.stopMove();
            }, false);

            // 地图图块加载完毕后执行函数
            function completeEventHandler() {
                marker = new AMap.Marker({
                    map: map,
                    position: [lon, lat],
                    icon: "http://webapi.amap.com/images/car.png",
                    offset: new AMap.Pixel(-26, -13),
                    autoRotation: true
                });
                for (var i = 0; i < data.waybillTraceList.length; i++) {
                    lineArr.push([data.waybillTraceList[i].lon, data.waybillTraceList[i].lat]);
                }
                // 绘制轨迹
                var polyline = new AMap.Polyline({
                    map: map,
                    path: lineArr,
                    strokeColor: "#00A",  //线颜色
                    strokeOpacity: 1,     //线透明度
                    strokeWeight: 3,      //线宽
                    strokeStyle: "solid"  //线样式
                });
                map.setFitView();
            }
        }
    });
    function goOrder1(waybillId) {
        window.location.href = "../bid/bid_ok_detail.html?waybillId=" + waybillId;
    }

    function goOrder3(waybillId) {
        window.location.href = "../bid/bid_ok_detail3.html?waybillId=" + waybillId;
    }
</script>
</body>
</html>